<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图片浏览器</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="all" href="style/blackangel.css?v=0.19" id="tgstyle" />
    <link rel="stylesheet" type="text/css" media="all" href="style/colorbox.css?v=0.18" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.colorbox-min.js?v=1"></script>
    <script type="text/javascript">
        var load = 0;
        $(document).ready(function(){
            if(load == 1){
                return false;
            }
            load = 1;

            initPicViewer();

        });
    </script>
    <style>
    body {
    color:#333;
    line-height:180%;
    margin:0;
    padding:0;
    text-align:center;
    overflow:hidden;
    font-size:12px;
    background:url(images/container_bg.gif);
    }
    *{font-family:微软雅黑,Trebuchet MS, Arial, Helvetica, Sans-Serif;}
    *:focus {outline: 0;}
    h1{
        font-size:180%;
        font-weight:normal;
        margin:0;
        padding:20px;
    }
    h2{
        font-size:160%;
        font-weight:normal;
    }
    h3{
        font-size:140%;
        font-weight:normal;
    }
    img{border:none;}
    ul,li{list-style:none;margin:0px;padding:0px}

    /* image replacement */
    .graphic, #prevBtn, #nextBtn{
        margin:0;
        padding:0;
        display:block;
        overflow:hidden;
        text-indent:-8000px;
    }
     /* // image replacement */


    #container{
        margin:0px;
        padding:0px;
        position:absolute;
        text-align:left;
        width:800px;
        height:440px;
        font-size:#fff;
        top:32px;
    }
    #container ul li{
        width:174px;
        height:120px;
        overflow:hidden;
        float:left;
        background: url("images/blackbg.png") repeat scroll 0 0 transparent;
        border:solid #333 5px;
        margin:5px;
        -webkit-border-top-left-radius:6px;-webkit-border-top-right-radius:6px;-webkit-border-bottom-right-radius:6px;-webkit-border-bottom-left-radius:6px;
        position:relative;

    }
    .img_loading{
        position:absolute;
        top:40px;
        left:70px;
    }
    #container ul li img{
        margin:0px auto;
        position:absolute;
    }
    #imglist{
        margin:0px auto;
        width:800px;
        height:437px;
        overflow:auto;
    }
    .header{
        height:32px;
        background:#000 url(images/header_bg_black1.png);
        color:#fff;
        position:absolute;
        width:800px;
        border-bottom:solid #000 1px;
        top:0px;
        left:0px;
        z-index:100;
    }
    .header span{float:left}
    .footer{
        height:30px;
        background:url(images/blackbg.png);
        border-top:solid #444 1px;
        color:#fff;
        position:absolute;
        width:800px;
        border-bottom:solid #000 1px;
        top:470px;
        left:0px;
        z-index:100;
    }

    .closepanel{display:block;position:absolute;left:384px;top:7px;width:50px;height:30px;cursor:pointer;}
    .sextname{padding:6px 0px 0px 10px;text-align:left;font-size:13px;font-family:'arial black';height:26px;}
    #pagetitle{padding:6px 20px 1px 3px;float:left;}

    .header span.selectpage{float:right;padding:1px 5px 2px 5px;cursor:pointer;border:solid #222 1px;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;margin:4px 0px 0px 5px;margin-right:10px;}
    .header span.myfav{float:right;padding:1px 5px 2px 5px;cursor:pointer;border:solid #222 1px;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;margin:4px 0px 0px 5px;margin-right:10px;}
    .footer span.setting{float:right;padding:2px 5px 1px 5px;cursor:pointer;border:solid #222 1px;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;margin-right:10px;font-size:11px;margin-top:1px;background:#000}
    .footer span.downloadall{float:right;padding:2px 5px 1px 5px;cursor:pointer;border:solid #222 1px;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;margin-right:10px;font-size:11px;margin-top:1px;background:#000}
    .footer span.delallfav{float:right;padding:2px 5px 1px 5px;cursor:pointer;border:solid #222 1px;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;margin-right:10px;font-size:11px;margin-top:1px;background:#000;display:none}
    .downloadall:hover,.setting:hover,.selectpage:hover,.myfav:hover,.delallfav:hover{color:#888;border-bottom:none;}
    #nopic{width:240px;padding:10px;background:#666;border:solid #000 4px;position:absolute;top:160px;left:280px;color:#fff;font-size:12px;line-height:150%}
    #loading{width:150px;padding:4px;background:#666;border:solid #000 1px;position:absolute;top:500px;left:325px;color:#fff;font-size:12px;line-height:120%}
    #tabslist{position:absolute;top:33px;left:1300px;width:auto;height:auto;background:url(images/blackbg.png);color:#999;display:;z-index:9999;border:solid #222 5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius5px;-webkit-border-bottom-left-radius:5px}
    #tabslist ul li{text-align:left;border-top:solid #333 1px;border-bottom:solid #000 1px;overflow:hidden;cursor:pointer;padding:3px 8px 3px 8px;width:300px;white-space:nowrap;}
    #tabslist ul li:hover{background:#000;color:#fff}

    .arrow_down{background:url(images/arrow_down.png) no-repeat;width:10px;height:5px;display:block;float:left}
    .panel{height:20px;background:#000;position:absolute;top:100px;width:174px;display:none;border-top:solid #888 1px;}
    .fav{display:block;width:30px;height:18px;cursor:pointer;position:absolute;top:0px;right:68px;z-index:9999;text-align:center;color:#fff;font-size:11px;}
    .download{display:block;width:30px;height:18px;cursor:pointer;position:absolute;top:0px;right:3px;z-index:9999;text-align:center;color:#fff;font-size:11px;}
    .share{display:block;width:30px;height:18px;cursor:pointer;position:absolute;top:0px;right:35px;z-index:9999;text-align:center;color:#fff;font-size:11px;}
    .delete{display:block;width:30px;height:18px;cursor:pointer;position:absolute;top:0px;left:5px;z-index:9999;text-align:center;color:#fff;font-size:11px;}
    .dlmsg{position:absolute;top:5px;left:10px;}
    .save-path-field {
        width: 200px;
    }
    </style>
</head>
<body>
<embed id="picdownloader" type="application/sogou-npruntime-picdownloader-plugin" width="0" height="0" />
<div id="debug" style="position:absolute;top:0px; left:0px;color:#fff;z-index:999999"></div>
<div class="header">
    <span class="sextname">BlackHawk PicViewer</span><span id="pagetitle"></span><span class="selectpage">选择页面</span><span class="myfav">收藏夹</span>
</div>
<div id="container" style="overflow:auto">
    <div id="imglist"></div>
</div>
<div id="tabslist"></div>
<div class="footer">
  <label for="savePathField">图片下载目录：</label> <input id="savePathField" class="save-path-field" type="text" name="savePath"/> <button id="selectDirPath">浏览</button>
  <span class="dlmsg"></span>
  <span class="setting">设 置</span>
  <span class="downloadall">全部下载</span>
  <span class="delallfav">清空收藏夹</span>
</div>
<!--<div id="footer"></div>-->
<div id="overlay"></div>
<div id="loading">数据正在加载中，请稍后...</div>

<script>
var imgList = new Array();
var port = "";
var port4back = "";
var currentTabId = 0;
var currentTabTitle = "";

function getFavList(){
    var imgList = new Array();
    var n = 0;
    for(key in localStorage){
        if(key.indexOf("http://") == 0){
            var img = {};
            img.src = key;;
            img.title = localStorage[key];
            imgList[n] = img;
            n ++;
        }
    }
    return imgList;
}


function checkImgType(imgUrl){
    var imgtype = imgUrl.substr(imgUrl.lastIndexOf(".") + 1).toLowerCase();
    var imgtypeStr = (localStorage["sogou_img_type"] == null) ? "jpg|gif|png|bmp" : localStorage["sogou_img_type"];
    var tempList = imgtypeStr.split("|");
    var n = tempList.length;
    for(var i = 0; i < n; i ++){
        if(imgtype == tempList[i]){
            return true;
        }
    }
    return false;
}

function checkImgSize(imgWidth, imgHeight){
    var imgSize = (localStorage["sogou_img_size"] == null) ? "100-100" : localStorage["sogou_img_size"];
    var tempList = imgSize.split("-");
    var width = tempList[0];
    var height = tempList[1];
    if(width > imgWidth || height > imgHeight){
        return false;
    }
    return true;
}

function getImageSavePath() {
    var imgSavePath = localStorage["sogou_img_savepath"] || "c:\\";
    imgSavePath = $("#savePathField").val() || imgSavePath;
    return imgSavePath;
}

function initSelectDirPath() {
    var currentSavePath = getImageSavePath();
    $("#savePathField").val(currentSavePath);
    $("#selectDirPath").click(function(event) {
        var picdownloader = document.getElementById("picdownloader");
        picdownloader.selectFolder(function(path) {
            path = path || currentSavePath;
            $("#savePathField").val(path);
        })
    });
}

function initPicViewer(){
    showHideLoading("show");
    sogouExplorer.windows.getLastFocused(function(w){
        sogouExplorer.tabs.getAllInWindow(w.id, function(tabs){
            getAllTabs(tabs);
        });
        sogouExplorer.tabs.getSelected(w.id, function(tab){
            $("#pagetitle").html(" - " + tab.title.substr(0,40));
            currentTabId = tab.id;
            currentTabTitle = tab.title;
            sogouExplorer.tabs.executeScript(tab.id, {file: "contentscript.js", allFrames: false}, function(){doCreatePort(tab.id);});
        });

    });
    //downloadAll();
    $(".setting").click(function(){
         sogouExplorer.extension.showOptionPage();
         window.close();
    });
    initSelectDirPath();
    downloadAll();
    $(".dlmsg").html("Ready");
    doCreateBackPort();
    $(".myfav").click(function(){
        showFavImgList();
    });
}

function getAllTabs(tabs){
    var len = tabs.length;
    var htmlArr = new Array();
    htmlArr[0] = "<ul>";
    for(var i = 0; i < len; i ++){
        htmlArr[i + 1] = "<li name='" + tabs[i].id + "' title='" + tabs[i].title + "'>" + tabs[i].title.substr(0, 40) + "</li>";
    }
    htmlArr[len + 1] = "</ul>";
    var html = htmlArr.join("");
    $("#tabslist").html(html);
    $("#tabslist ul li").click(function(){
        $(".delallfav").fadeOut();
        var tabId = parseInt($(this).attr("name"));
        var tabTitle = $(this).attr("title");
        currentTabTitle = tabTitle;
        $("#pagetitle").html(" - " + tabTitle.substr(0,40));
        //alert(typeof(tabId));
        currentTabId = tabId;
        sogouExplorer.tabs.executeScript(tabId , {file: "contentscript.js", allFrames: false}, function(){doCreatePort(tabId);});
        $("#tabslist").animate({
            left: '1300px',
        }, 500, function() {

        });
    });
    $(".selectpage").mousedown(function(){
        $("#tabslist").animate({
            left: '500px',
        }, 500, function() {

        });
    });
    $("#container").click(function(){
        $("#tabslist").animate({
            left: '1300px',
        }, 500, function() {

        });
    });
}

function doCreatePort(tabId){
    port = sogouExplorer.tabs.connect(tabId);
    port.onMessage.addListener(function messageHandler(response) {
        switch (response.cmd) {
            case "imglist": {
                var jsonData = response.result;
                var imgList = jsonData.images;
                var titleList = jsonData.titles;
                showImgList(imgList, titleList);
                break;
            }
        }
    });
    port.postMessage({cmd: "imglist"});
}

function doCreateBackPort(){
    port4back = sogouExplorer.extension.connect();
    port4back.onMessage.addListener(function messageHandler(response) {
        switch (response.cmd) {
            case "dlsucc": {
                var picurl = response.picurl;
                $(".dlmsg").html(picurl + " 下载完成");
                setTimeout(function() {
                    var imgSavePath = getImageSavePath();
                    setDlMsg('图片目录：' + imgSavePath);
                }, 500);
                break;
            }
        }
    });
}


function doPostMessage(data){
    port.postMessage(data);
}

function getDataFromTabpage(){
    port.onMessage.addListener(function messageHandler(response) {
        switch (response.cmd) {
            case "test": {
                alert(response.result);
                break;
            }
        }
    });
}

function showFavImgList(){
    $("#pagetitle").html(" - 我的收藏夹");
    $(".delallfav").fadeIn();
    var imgList = getFavList()
    var htmlArr = new Array();
    var len = imgList.length;
    htmlArr[0] = "<ul>";
    var n = 0;
    for(var i = 0; i < len; i ++){
        var src = imgList[i]["src"];
        var title = imgList[i]["title"];
        try{
            htmlArr[i+1] = "<li><a rel='pic' href=\"" + src + "\" title='" + title + "'><img class='img_loading' src='images/loading.gif' id='loading_" + i + "' /><img class='pic' src=\"" + src + "\" style='display:none' num='" + i + "'/></a><div class='panel'><span class='delete'>删除</span><span class='download'>下载</span><span class='share' ttt='" + title + "'>分享</span></div></li>";
            n ++;
        } catch(e){
        }
        //alert(htmlArr[i+1]);
    }
    if (n <= 0){
        html = "<div id='nopic'>收藏夹中没有数据！</div>";
        $("#imglist").html(html);
    } else {
        //alert(n);
        htmlArr[len + 1] = "</ul>";
        var html = htmlArr.join("");

        $("#imglist").html(html);
        //sharePanelInit();
        var t = loadImg(n);

        showHideLoading("hide");

        $("a[rel='pic']").colorbox({width:"95%", height:"95%"});
        //$('#imglist').jScrollPane({showArrows:true, maintainPosition:false});
        downloadPic();
        sharePic();
        delFavImg();
        delAllFav();
    }
}

function showImgList(imgList, titleList){
    var htmlArr = new Array();
    var len = imgList.length;
    htmlArr[0] = "<ul>";
    var n = 0;
    for(var i = 0; i < len; i ++){
        if(imgList[i] == null || imgList[i].indexOf("se-extension:") == 0 || !checkImgType(imgList[i])){
            continue;
        }

        try{
            if(titleList){
                var title = titleList[imgList[i]] ? titleList[imgList[i]] : imgList[i];
            }
            htmlArr[i+1] = "<li><a rel='pic' href=\"" + imgList[i] + "\" title='" + title + "'><img class='img_loading' src='images/loading.gif' id='loading_" + i + "' /><img class='pic' src=\"" + imgList[i] + "\" style='display:none' num='" + i + "'/></a><div class='panel'><span class='fav' ttt='" + title + "'>收藏</span><span class='download'>下载</span><span class='share' ttt='" + title + "'>分享</span></div></li>";
            n ++;
        } catch(e){
        }
        //alert(htmlArr[i+1]);
    }
    //alert(n);
    htmlArr[len + 1] = "</ul>";
    var html = htmlArr.join("");

    $("#imglist").html(html);
    //sharePanelInit();
    var t = loadImg(n);
    if (n <= 0){
        html = "<div id='nopic'>没有找到图片，可能有以下几个原因：<br>1.当前页面没有值得浏览的图片<br>2.图片获取失败...</div>";
        $("#imglist").html(html);
    }
    showHideLoading("hide");

    $("a[rel='pic']").colorbox({width:"95%", height:"95%"});
    //$('#imglist').jScrollPane({showArrows:true, maintainPosition:false});
    downloadPic();
    sharePic();
    favImg();

}

function loadImg(n){
    $('img.pic').each(function(){
        $(this).error(function(){
            $(this).parent().parent().remove();
        });
        $(this).load(function(){
            var height = $(this).height();
            var width = $(this).width();
            var t = $(this).attr("num");
            if(width >= height ){
                if(width > 174){
                    var rate = width / 170;
                    $(this).width("170");
                    $(this).css("top", (60 - (height/rate)/2));
                    $(this).css("left",2);
                } else {
                    $(this).css("top", (60 - height/2));
                    $(this).css("left", (87 - width/2));
                }
            } else {
                if(height > 120) {
                    var rate = height / 116;
                    $(this).height("116");
                    $(this).css("left", (87 - (width/rate)/2));
                    $(this).css("top", 2);
                } else {
                    $(this).css("top", (60 - height/2));
                    $(this).css("left", (87 - width/2));
                }

            }
            if(!checkImgSize(width, height) || !width){
                $(this).parent().parent().remove();
                n = n - 1;
            } else {
                $("#loading_" + t).hide();
                $(this).show();
            }

        });
    });
    return n;
}

function showHideLoading(type){
    if(type == "show"){
        $("#loading").animate({
            opacity: 0.7,
            top: '200',
        }, 1);
    } else {
        $("#loading").animate({
            opacity: 0,
            top: '500',
        }, 1);
    }
}


//全部下载
function downloadAll(){
    $(".downloadall").click(function(){
        var picurlList = new Array();
        var savepathList = new Array();
        n = 0;
        $("#container ul li a").children(".pic").each(function(){
            var ele = $(this);
            var picurl = ele.attr("src");
            picurl = picurl.toString();
            var saveFileName = picurl.substr(picurl.lastIndexOf("/") + 1);
            picurlList[n] = picurl;
            var imgSavePath = getImageSavePath();
            savepathList[n] = imgSavePath + "\\" + currentTabTitle + "\\" + saveFileName;
            n ++;
        });
        port4back.postMessage({cmd: "download", picurl:picurlList, savepath:savepathList});
    });
}

function sharePic(){
    $(".share").click(function(){
        var ele = $(this);
        var picurl = $(this).parent().siblings()[0];
        var title = $(this).attr("ttt");
        //alert(title);
        share("sina", picurl, title);
    });
}
function downloadPic(){
    $(".download").click(function(){
        var picurlList = new Array();
        var savepathList = new Array();

        var ele = $(this);
        var picurl = $(this).parent().siblings()[0];
        picurl = picurl.toString();
        $(".dlmsg").html("下载 " + picurl);
        var saveFileName = picurl.substr(picurl.lastIndexOf("/") + 1);
        picurlList[0] = picurl;
        var imgSavePath = getImageSavePath();
        savepathList[0] = imgSavePath + "\\" + currentTabTitle + "\\" + saveFileName;

        port4back.postMessage({cmd: "download", picurl:picurlList, savepath:savepathList});
    });

    $("#container ul li").mouseover(function(){
        $(this).children(".panel").fadeTo(500, 0.8);

    });
    $("#container ul li").mouseleave(function(){
        $(this).children(".panel").hide();
    });
}

function setDlMsg(msg){
    $(".dlmsg").html(msg);
}

function favImg(){
    $(".fav").click(function(){
        var picurl = $(this).parent().siblings()[0];
        picurl = picurl.toString();
        var title = $(this).attr("ttt");
        localStorage[picurl] = title;
        showNotice($(this), "收藏成功！");
    });
}

function showNotice(ele, msg){
    $('#notice_tip').remove();
    var html = "<div id='notice_tip' style='position:absolute;width:70px;height:24px;z-index:999;top:0px;left:10px;background:url(images/blackbg.png);border:solid #666 1px;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:3px;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;color:#fff;display:none;padding:2px 0px 0px 10px;'>" + msg + "</div>";
    ele.parent().parent().append(html);
    $("#notice_tip").css({'left':10, 'top':10});
    $("#notice_tip").fadeIn();
    setTimeout("$('#notice_tip').fadeOut('slow')", 1000);
}

function delFavImg(){
    $(".delete").click(function(){
        var picurl = $(this).parent().siblings()[0];
        picurl = picurl.toString();
        localStorage.removeItem(picurl);
        $(this).parent().parent().animate({
            left: '1300px',
        }, 400, function() {
            $(this).remove();
            var imgList = getFavList();
            if (imgList.length == 0){
                showFavImgList();
            }
        });
    });
}

function delAllFav(){
    $(".delallfav").click(function(){
        $(".delete").each(function(){
            var picurl = $(this).parent().siblings()[0];
            picurl = picurl.toString();
            localStorage.removeItem(picurl);
            //setTimeout("$(this).parent().parent().fadeOut()", 1000);
        });
        html = "<div id='nopic'>收藏夹中没有数据！</div>";
        $("#imglist").html(html);
    });
}

function share(type, pic, title){
    var textArr = new Array();
    textArr[0] = "通过#搜狗浏览器应用#-#图片浏览器# http://ie.sogou.com/tools/tool_60.html 分享图片";
    //var rand = Math.round(Math.random()*4);
    //var rand = 0;
    if(title.indexOf("http://") == 0){
        title = "";
    } else {
        title = "：" + title;
    }
    var title = encodeURIComponent(textArr[0]) + title;
    switch(type){
        case "sina":
             sogouExplorer.tabs.create({
                url: "http://v.t.sina.com.cn/share/share.php?url=&appkey=709642575&title="+title+"&pic=" + pic + "&ralateUid=1676751317",
                selected: true,
                //index: tab.index + 1
             });

        break;

        case "sohu":
             sogouExplorer.tabs.create({
                url: "http://t.sohu.com/third/post.jsp?&url=http://ie.sogou.com/tools/tool_43.html&title=" + title + "&pic=" + pic + "&content=utf-8",
                selected: true,
                //index: tab.index + 1
             });

        break;

        case "qq":
             sogouExplorer.tabs.create({
                url: "http://v.t.qq.com/share/share.php?url=http://ie.sogou.com/tools/tool_43.html&appkey=&site=&pic=" + pic + "&title=" + title,
                selected: true,
                //index: tab.index + 1
             });

        break;
    }
    window.close()
}
</script>
</body>
</html>